// 布局
$display: block, none, inline-block, flex, inline, inline-flex;
@each $item in $display {
	.#{$item} {
		display: $item;
	}
}

// 方向
$direction: row, row-reverse, column, column-reverse;
@each $item in $direction {
	.flex-#{$item} {
		flex-direction: $item;
	}
}

// flex 大小
@for $i from 0 through 12 {
	.flex-#{$i} {
		@if ($i == 0) {
			flex-shrink: 0;
		} @else {
			flex: $i;
		}
	}
}

// 换行
$wrap: wrap, wrap-reverse, nowrap;
@each $item in $wrap {
	.flex-#{$item} {
		flex-wrap: $item;
	}
}

// 排序
@for $i from 0 through 12 {
	.order-#{$i} {
		order: $i;
	}
}
.order-first {
	order: -9999;
}
.order-last {
	order: 9999;
}

// flex 主轴定位
$justifyContent: (
	start: flex-start,
	end: flex-end,
	center: center,
	between: space-between,
	around: space-around,
	evenly: space-evenly
);
@each $key, $item in $justifyContent {
	.justify-#{$key} {
		justify-content: $item;
	}
}

// flex 纵轴定位
$alignItems: (
	start: flex-start,
	end: flex-end,
	center: center,
	baseline: baseline,
	stretch: stretch
);
@each $key, $item in $alignItems {
	.items-#{$key} {
		align-items: $item;
	}
}

// 隐藏
$overflow: hidden, visible;
@each $item in $overflow {
	.overflow-#{$item} {
		overflow: $item;
	}
}

// 定位
$position: static, fixed, absolute, relative, sticky;
@each $item in $position {
	.#{$item} {
		position: $item;
	}
}

.z-auto {z-index: auto}

.z-max {z-index: 9999999}
